#container {

    width: 400px;

    height: 300px;

    overflow: hidden;

}



#photo {

    width: 1200px;

    animation: switch 5s ease-out infinite;

}



#photo > img {

    float: left;

    width: 400px;

    height: 300px;

}



@keyframes switch {

    0%, 25% {

        margin-left: 0;

    }

    35%, 60% {

        margin-left: -400px;

    }

    70%, 100% {

        margin-left: -800px;

    }

}
/* 设置容器大小*/
.container {
    position: relative;
    width: 800px;
    height: 300px;
}
/* 设置input位置 */
.container input {
    position: absolute;
    z-index: 23;
    bottom: 10px;
}
/* 设置input位置 */
#pic1 {
    left: 48%;
}
#pic2 {
    left: 50%;
}
#pic3 {
    left: 52%;
}
/* 设置图片大小，透明度为0 */
.wrap img {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
/* 默认选中第一张，根据选中的input，展示对应的图片 */
#pic1:checked ~ .wrap img:nth-of-type(1),
#pic2:checked ~ .wrap img:nth-of-type(2),
#pic3:checked ~ .wrap img:nth-of-type(3) {
    opacity: 1;
    animation: showImg linear 1s 1 0s normal;
}
/* 设置图片展示出来时候的动画 */
@keyframes showImg {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
/* 设置箭头的位置大小 */
.arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    color: #fff;
}
/* 设置箭头的图片的大小，替换图中文字即可 */
/* .arrow img {
  width: 40px;
  height: 40px;
} */
/* 设置左箭头位置 */
.left {
    left: 0;
}
/* 设置右箭头位置 */
.right {
    right: 0;
}

/* 默认隐藏箭头 */
.arrow label {
    display: none;
}

/* 根据选中的input设置需要展示哪个左边箭头 */
#pic1:checked ~ .left label:nth-of-type(3),
#pic2:checked ~ .left label:nth-of-type(1),
#pic3:checked ~ .left label:nth-of-type(2) {
    display: block;
}

/* 根据选中的input设置需要展示哪个右边箭头 */
#pic1:checked ~ .right label:nth-of-type(2),
#pic2:checked ~ .right label:nth-of-type(3),
#pic3:checked ~ .right label:nth-of-type(1) {
    display: block;
}
